<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-deer">
                                <div class="panel-heading">商品信息</div>
                                <div class="panel-body">
                                    <p><span>订单号：</span><small>{$row.sn}</small>
                                    </p>
                                    <table class="table table-bordered info-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <div class="th-inner">商品名称</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">商品规格</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">数量</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">商品金额</div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>{$row.item_name}</strong></td>
                                                <td>{$row.item_gg_name}</td>
                                                <td>{$row.num}</td>
                                                <td>{$row.price_item_total}</td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="12" style="text-align: right;">
                                                    <span class="ordertext">商品总价：<samp class="text-red">￥{$row.price_total}</samp></span>
                                                    <span class="ordertext">会员折后：<samp class="text-red">￥{$row.price_discount}（{$row.price_discount_bl*100}%）</samp></span>
                                                    <span class="ordertext">优惠金额：<samp class="text-red">￥{$row.price_yh}</samp></span>
                                                    <span class="ordertext">实际支付：<samp  class="text-red">￥{$row.price_payed}</samp></span>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <div style="color: #333;">
                                        <p style="margin-bottom: 15px;">交易状态：
                                            <span class="label label-primary">{$row.status_txt}</span>
                                        </p>
                                    </div>
                                    <div style="color: #333;">
                                        <p style="margin-bottom: 15px;">客户备注：<span>{$row.note|default="无"}</span>
                                        </p>
                                    </div>
                                    <div style="color: #333;">
                                        <p style="margin-bottom: 15px;">提交时间：<span>{$row.time_add}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="panel panel-deer">
                                <div class="panel-heading">客户信息</div>
                                <div class="panel-body">
                                    <table class="table table-striped info-table2">
                                        <tbody>
                                            <tr>
                                                <td width="100px">客户ID</td>
                                                <td>{$row.jz_user_id}</td>
                                            </tr>
                                            <tr>
                                                <td>客户姓名</td>
                                                <td>{$row.user_name}</td>
                                            </tr>
                                            <tr>
                                                <td>联系电话</td>
                                                <td>{$row.user_phone}</td>
                                            </tr>
                                            <tr>
                                                <td>收货地址</td>
                                                <td>
                                                    <div>{$row.address_title} {$row.address_detail}</div>
                                                    <div>{$row.address_address}</div>
                                                    {if condition="$row.latitude && $row.longitude"}
                                                    <div  >
                                                        <img class="map-pic" src="https://apis.map.qq.com/ws/staticmap/v2/?center={$row.latitude},{$row.longitude}&zoom=15&size=600*300&maptype=roadmap&markers=size:large|color:0xFFCCFF|label:k|{$row.latitude},{$row.longitude}&key={$mapKey}"/>
                                                    </div>
                                                    <a  class="btn btn-primary btn-map-nav22" target="_blank" href="https://apis.map.qq.com/uri/v1/marker?marker=coord:{$row.latitude},{$row.longitude};title:{$row.address_title};addr:{$row.address_address}&referer=myapp"><i class="fa fa-map-marker"></i> 导航</a>
                                                    {/if}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>备注图片</td>
                                                <td>
                                                    {volist name="$row.imgs" id="item"}
                                                    <img src="{$item}" data-url="{$item}" class="thumbnail data-tips-image" style="width: 100px;height: 100px;float: left;margin:5px;">
                                                    {/volist}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel panel-deer">
                                <div class="panel-heading">物流信息</div>
                                <div class="panel-body">
                                    {if condition="$row.status eq 2"}
                                        <div style="color: #333;">
                                            <p style="margin-bottom: 15px;"><span>未发货</span></p>
                                        </div>
                                    {/if}
                                    <table class="table table-striped info-table2 {$row.status==2?'hide':''}">
                                        <tbody>
                                            <tr>
                                                <td width="100px">快递公司</td>
                                                <td>{$row.kd_gs}</td>
                                            </tr>
                                            <tr>
                                                <td>快递单号</td>
                                                <td>{$row.kd_sn}</td>
                                            </tr>
                                            <tr>
                                                <td>发货时间</td>
                                                <td>{$row.kd_time}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                  
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel panel-deer">
                                <div class="panel-heading">分销信息</div>
                                <div class="panel-body">
                                    <table class="table table-striped info-table2">
                                        <tbody>
                                            <tr>
                                                <td width="100px">一级用户</td>
                                                <td>{$row.agent_lev1_uid==0?'无':'UID'.$row.agent_lev1_uid}</td>
                                            </tr>
                                            <tr>
                                                <td width="100px">一级分佣</td>
                                                <td>￥{$row.agent_lev1_price} <span class="tag_deer_{$row.agent_lev1_price_js}">{$row.agent_lev1_price_js==1?'已入账':'未入账'}</span></td>
                                            </tr>
                                            <tr>
                                                <td width="100px">一级分佣说明</td>
                                                <td>{$row.agent_lev1_price_note|default='-'}</td>
                                            </tr>
                                            <tr>
                                                <td width="100px">二级用户</td>
                                                <td>{$row.agent_lev2_uid==0?'无':'UID'.$row.agent_lev2_uid}</td>
                                            </tr>
                                            <tr>
                                                <td width="100px">二级分佣</td>
                                                <td>￥{$row.agent_lev2_price} <span class="tag_deer_{$row.agent_lev2_price_js}">{$row.agent_lev2_price_js==1?'已入账':'未入账'}</span></td>
                                            </tr>
                                            <tr>
                                                <td width="100px">二级分佣说明</td>
                                                <td>{$row.agent_lev2_price_note|default='-'}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel panel-deer">
                                <div class="panel-heading">交易信息</div>
                                <div class="panel-body">
                                    <table class="table table-bordered info-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <div class="th-inner">付款状态</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">支付流水号</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">金额</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">类型</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">支付方式</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">付款时间</div>
                                                </th>
                                                <th class="text-center">
                                                    <div class="th-inner">备注</div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {volist name="$row.pay_log" id="item"}
                                            <tr>
                                                <td>
                                                    {if condition="$item.status eq 1"}
                                                    <span class="label label-danger">待支付</span>
                                                    {elseif condition="$item.status eq 2"}
                                                    <span class="label label-success"><i class="fa fa-check"></i>
                                                        已支付</span>
                                                    {else/}
                                                    <span class="label label-default">已取消</span>
                                                    {/if}
                                                </td>
                                                <td>{$item.order_sn}S{$item.id}</td>
                                                <td>{$item.price}</td>
                                                <td>
                                                    {if condition="$item.payway_type eq 1"}
                                                    线上
                                                    {else/}
                                                    线下
                                                    {/if}
                                                </td>
                                                <td>{$item.pay_way}</td>
                                                <td>{$item.pay_time}</td>
                                                <td>{$item.note}</td>
                                            </tr>
                                            {/volist}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    .tag_deer_1{
        background-color: #18bc9c;
        color:#fff;
        font-size: 12px;
        border-radius: 2px;
        padding:1px 8px;
    }
    .tag_deer_2{
        background-color: #9c9c9c;
        color:#fff;
        font-size: 12px;
        border-radius: 2px;
        padding:1px 8px;
    }
    .content {
        padding: 25px 20px;
    }
    .data-tips-image{
        cursor: pointer;
    }
    .map-pic{
        width: 400px;
        margin:10px 0;
        border-radius: 15px;
    }
    /* 订单详情 */
    .order-detail .order-block {
        height: 31px;
        line-height: 31px;
        background: #e8edf0;
        border-radius: 13px;
        font-size: 14px;
        text-align: center;
        position: relative;
        margin-bottom: 50px;
    }

    .order-detail .order-block:before,
    .order-detail .order-block:after {
        content: "";
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        border-radius: 13px;
        background: #18bc9c;
    }

    .order-detail .order-block:after {
        background: #4dc7af;
        z-index: 1;
    }

    .order-detail .order-block.progress-1:before {
        width: 0;
    }

    .order-detail .order-block.progress-1:after {
        width: 20%;
    }

    .order-detail .order-block.progress-2:before {
        width: 20%;
    }

    .order-detail .order-block.progress-2:after {
        width: 40%;
    }

    .order-detail .order-block.progress-3:before {
        width: 40%;
    }

    .order-detail .order-block.progress-3:after {
        width: 60%;
    }

    .order-detail .order-block.progress-4:before {
        width: 60%;
    }

    .order-detail .order-block.progress-4:after {
        width: 80%;
    }

    .order-detail .order-block.progress-5:before {
        width: 100%;
    }

    .order-detail .order-block.progress-5:after {
        width: 100%;
    }

    .order-detail .order-block.progress-5 li:nth-child(5) {
        color: #fff;
    }

    .order-detail .order-block li {
        width: 20%;
        float: left;
        list-style-type: none;
        border-radius: 13px;
        position: relative;
        z-index: 3;
    }

    .order-detail .order-block .tip {
        font-size: 12px;
        padding-top: 10px;
        color: #717171;
    }

    .order-detail .order-block.progress-1 li:nth-child(1),
    .order-detail .order-block.progress-2 li:nth-child(1),
    .order-detail .order-block.progress-3 li:nth-child(1),
    .order-detail .order-block.progress-4 li:nth-child(1),
    .order-detail .order-block.progress-5 li:nth-child(1) {
        color: #fff;
    }

    .order-detail .order-block.progress-2 li:nth-child(2),
    .order-detail .order-block.progress-3 li:nth-child(2),
    .order-detail .order-block.progress-4 li:nth-child(2),
    .order-detail .order-block.progress-5 li:nth-child(2) {
        color: #fff;
    }

    .order-detail .order-block.progress-3 li:nth-child(3),
    .order-detail .order-block.progress-4 li:nth-child(3),
    .order-detail .order-block.progress-5 li:nth-child(3) {
        color: #fff;
    }

    .order-detail .order-block.progress-4 li:nth-child(4),
    .order-detail .order-block.progress-5 li:nth-child(4) {
        color: #fff;
    }

    .order-detail .td__order-price {
        width: 200px;
        display: inline-block;
    }

    .order-head {
        width: 100%;
        padding: 12px 20px;
        margin-top: 60px;
        /* margin-bottom: 20px; */
        /* border-bottom: 1px solid #eef1f5; */
    }

    .order-head:not(:first-child) {
        margin-top: 0;
    }

    .order-head .title {
        position: relative;
        font-size: 1.5rem;
        color: #333;
    }

    .order-head .title::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 14px;
        background: #18bc9c;
        top: 4px;
        left: -12px;
    }

    .table-responsive .table>tbody>tr>td {
        text-align: center;
        vertical-align: middle;
        color: #676767;
    }

    .ordertext {
        margin: 0 10px;
    }

    .table-bordered {
        border: 1px solid #e8edf0;
    }

    .table-bordered>thead>tr>th,
    .table-bordered>tbody>tr>th,
    .table-bordered>tfoot>tr>th,
    .table-bordered>thead>tr>td,
    .table-bordered>tbody>tr>td,
    .table-bordered>tfoot>tr>td {
        border: 1px solid #e8edf0;
    }

    .table thead tr {
        background: #f8f9fb;
    }

    .order_price span {
        width: 70px;
        display: inline-block;
        text-align: right;
    }

    .info-table tr td {
        text-align: center;
    }
    .panel-deer > .panel-heading {
    background-color: #f6f1ff !important;
    color: #985fff;
    border-color: #e8e8e8;
}
</style>